<!--
	创建者：luyiming
	该文件用于：
	创建时间：2019-12-20 01:27:15
-->
<template>
  <div class="informationRCIM_view">
    <info-header></info-header>
    <div class="main_wrap" :class="hideSide ? 'hidenside' : ''">
      <div
        class="cont_wrap lf_cont_wrap fl"
        :class="[isShowClickLf ? 'showBtn' : '', isClose? 'close': '']"
      >
        <div class="numberIndexWrap">
          <NumberIndex
            :is-alarm="false"
            type-name="异常总数"
            style="cursor:pointer"
            @abnormalSkip="abnormalSkip({isHandle: ''})"
            :type-number="abnormalData.abnormalNum"
          />
          <NumberIndex
            :is-alarm="false"
            type-name="已处理"
            style="cursor:pointer"
            @abnormalSkip="abnormalSkip({isHandle: '1'})"
            :type-number="abnormalData.handleAbnormalNum"
          />
          <NumberIndex
            :is-alarm="true"
            type-name="未处理"
            style="cursor:pointer"
            @abnormalSkip="abnormalSkip({isHandle: '0'})"
            :type-number="abnormalData.noHandleAbnormaNum"
          />
        </div>
        <div class="side-dev" style="width: 100%;">
          <div class="danger" style="height:32%;">
            <div class="title">月度异常趋势</div>
            <div class="chart_wrap">
              <BrokenLineChart
                v-if="monthList.length"
                :show="{hideSide,isShowClickLf}"
                id="BrokenLineChartId"
                height="100%"
                width="100%"
                ref="chart1"
                :monthList="monthList"
                :dataList="dataList"
              />
            </div>
          </div>
          <div class="danger" style="height:33%">
            <div class="title">区域异常情况</div>
            <div class="chart_wrap">
              <PieFullChart
                v-if="seriesData.length"
                id="PieFullChartId"
                height="100%"
                :width="'100%'"
                ref="chart2"
                :seriesData="seriesData"
                :abnormalTotal="abnormalTotalNum"
              />
            </div>
          </div>
          <div class="danger" style="height:33%">
            <div class="title">督办信息</div>
            <LunBo
              id="LunBoId"
              :abnormal-num="3"
              :dataList="LunBoDataList"
              :abnormalTotal="abnormalTotal"
            />
          </div>

          <div style="height:3px;width:100%">
            <img src="@/assets/info_images/border.png" height="100%" width="100%" alt srcset />
          </div>
        </div>
      </div>
      <div class="cont_wrap mid_cont_wrap fl">
        <div class="map_wrap">
          <count
            :countData="countData"
            style="position:absolute;left:0px;top:20px;z-index:1;"
            width="100%"
          />
          <map-chart @mapClick="mapClick" :mapData="mapData" height="100%" width="100%" ref="chart4" />
          <bar-chart
            :companyData="companyData"
            style="position:absolute;left:0;bottom:0;"
            height="40%"
            width="30%"
            ref="chart3"
          />
          <div style="position:absolute;bottom:10px;right:0;">
            <el-radio-group v-model="tableRadio" size="small">
              <el-radio-button :label="v.type" v-for="(v, i) of tabelLabel" :key="i">{{v.label}}</el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <div class="tb_wrap">
          <div class="table-border">
            <info-table :table-data="tableData" :table-head="tableHead" :tableHeight="tableHeight"/>
          </div>
        </div>
      </div>
      <div
        class="cont_wrap rg_cont_wrap fl"
        :class="[isShowClickRg ? 'showBtn' : '', isClose? 'close': '']"
      >
        <div class="numberIndexWrap">
          <NumberIndex :is-alarm="false" type-name="在库" :type-number="abnormalAndWork.libraryNum" />
          <NumberIndex
            :is-alarm="false"
            type-name="运输"
            :type-number="abnormalAndWork.transportNum"
          />
          <NumberIndex :is-alarm="false" type-name="作业" :type-number="abnormalAndWork.workNum" />
        </div>
        <div class="side-dev">
          <div class="danger" style="height:32%;">
            <div class="title">源危险等级分布</div>
            <div class="chart_wrap">
              <PieChart @paramId="paramId" v-if="levelData.length" :dataList="levelData" :width="'432px'" height="100%" ref="chart5" />
            </div>
          </div>
          <div class="danger" style="height:33%;">
            <div class="title">行业分类TOP5</div>
            <div class="chart_wrap ishid">
              <LinePercentage :dataList="classificationIndustryList" width="100%" height="100%" />
            </div>
          </div>
          <div class="danger" style="height:33%;">
            <div class="title">核安全排名TOP5</div>

            <div class="chart_wrap">
              <TopRank :dataList="safetyList" width="100%" height="100%" />
            </div>
          </div>
          <div style="height:3px;width:100%">
            <img src="@/assets/info_images/border.png" height="100%" width="100%" alt srcset />
          </div>
        </div>
      </div>
    </div>
    <div
      class="btn btn_left"
      v-if="showBtn"
      @click="showBtnClick('lf')"
      :class="!isShowClickLf ? '':'mggf'"
    >
      <i class="el-icon-s-unfold"></i>
    </div>
    <div
      class="btn btn_right"
      v-if="showBtn"
      @click="showBtnClick('rg')"
      :class="!isShowClickRg ? '':'mggr'"
    >
      <i class="el-icon-s-fold"></i>
    </div>
  </div>
</template>

<script>
import InformationRcim from "./index.js";
export default InformationRcim;
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>

<style lang="scss">
.informationRCIM_view {
  // element组件样式替换
  .el-radio-button__inner {
    border-color: #041991;
    color: #fff;
    background: transparent;
  }
  .el-radio-group {
    .is-active {
      background: #041991;
      .el-radio-button__inner {
        color: #fff;
      }
    }
  }
  .el-radio-button__orig-radio:checked+.el-radio-button__inner{
	  background: #041991;
  }
  .el-radio-button:first-child .el-radio-button__orig-radio:checked+.el-radio-button__inner {
    border-left-color: #1890ff;
  }
  .el-radio-button:first-child .el-radio-button__inner {
    border-left-color: #041991;
  }
  .el-table--scrollable-y .el-table__body-wrapper {
    @include scrollBarInfo();
    // height: 100% !important;
  }

  #LunBoId {
    height: calc(100% - 25px);
  }
}
</style>
